<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div>
    <w-nav-bar
      title="设置"
      :back="false"
      :more-home="false"/>
    <div
      class="top-user"
      @click="loginBtnClick">
      <template v-if="isLogin">
        <span
          @click="adminClick"
          class="icon w-image-fit w-round"
          v-lazy:background-image="userIcon"/>
        <span class="name">{{ user.name }}</span>
      </template>
      <span v-else>登录</span>
    </div>

    <group>
      <cell
        title="第三方登录"
        link="/set/OAuth"
        is-link/>
      <cell
        title="意见列表"
        link="/set/advice-list"
        is-link/>
      <cell
        title="API文档"
        @click.native="apiCellClick"
        is-link/>
      <cell
        title="网站统计"
        @click.native="statisticalClick"
        is-link/>
      <cell
        title="关于..."
        link="/set/about"
        is-link/>
    </group>

    <template v-if="isLogin">
      <group v-if="isLogin">
        <cell
          title="后台管理"
          link="/set/admin"
          is-link/>
      </group>

      <div class="w-max-btn">
        <x-button
          @click.native="exitBtnClick"
          type="warn">退出登录</x-button>
      </div>
    </template>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import Filters from '@/utils/filters'
  import { Cell, Group, XButton } from 'vux'
  import Config from '@/config'

  export default {
    name: 'SetRoot',
    components: {
      Cell,
      Group,
      XButton
    },
    computed: {
      ...mapGetters (['user', 'isLogin']),
      /**
       * 用户头像
       * @returns {*|string}
       */
      userIcon() {
        return Filters.imageFill (this.user.icon, 1.5, 1.5, 'rem')
      }
    },
    data() {
      return {
      }
    },
    methods: {
      /**
       * 登录按钮点击
       */
      loginBtnClick() {
        if (this.isLogin) { return }
        this.$router.push ({path: '/set/login'})
      },
      /**
       * 账号设置按钮点击
       */
      adminClick() {
        if (this.isLogin) {
          this.$router.push ({name: 'SetAccountAdmin'})
        }
      },
      /**
       * API按钮点击
       */
      apiCellClick() {
        window.open ('/docs/api')
      },
      /**
       * 网站统计按钮点击
       */
      statisticalClick() {
        window.open (Config.webStatistical)
      },
      /**
       * 退出按钮点击
       */
      exitBtnClick() {
        this.$store.dispatch ('LOG_OUT').w_then(() => {
          this.$w_popview.msgSuccess ('退出成功')
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .top-user {
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: -webkit-linear-gradient(left, #8590fb, #4cc2d7); /* Safari 5.1 - 6.0 */
    background: linear-gradient(to right, #8590fb, #4cc2d7); /* 标准的语法 */
    color: #ccc;
    font-size: 30px;

    > .icon {
      width: 100px;
      height: 100px;
    }

    > .name {
      font-size: 24px;
      color: #666;
    }
  }

</style>
